<template>
	<view class="goodsDetail">
		<view class="detailImg">
			<u-swiper name="file_url" @click="clickImg" mode="number" :autoplay="false" 
			img-mode="scaleToFill" indicator-pos="topLeft" :height="swiperHeight" 
			:list="seckillInfo.cover_image"></u-swiper>
		</view>
		<view class="price_box" style="background: url(https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/price_seckill_bg.png) no-repeat;background-size: 100% 100%;">
			<view class="price_txt" style="display: flex;flex-direction: column;">
				<view>¥<text>{{seckillInfo.price}}</text>秒杀价</view>
			</view>
			<!-- <view style="font-size: 25rpx;">
				<view style="display: flex;justify-content: flex-end;margin-bottom: 30rpx;">
					<view v-if="down_status==1">距开始</view>
					<view v-if="down_status==2">距结束</view>
					<view v-if="down_status==3">已结束</view>
					<u-count-down font-size="25" separator-size="25" :timestamp="seckillInfo.having_time" separator-color="#fff" color="#fff" bg-color="rbga(0,0,0,0)" @change="onChange"></u-count-down>
				</view>
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<u-line-progress style="width: 150rpx;" height="15" :show-percent="false" :striped="true" :striped-active="true" active-color="#ECBD6F" :percent="goodsInfo.percentage"></u-line-progress>
					<view>仅剩{{seckillInfo.bstock}}件</view>
				</view>
			</view> -->
		</view>
		<view class="goods_info">
			<view class="goods_tit">{{seckillInfo.title}}</view>
			<view class="goods_remark">{{goodsInfo.brief}}</view>
		</view> 
		<view class="norms">
			<text style="color: #909399;margin-right: 20rpx;">服务</text>
			<view v-for="(item, index) in services" :key="index">
				<image :src="item.icon"></image>
				<text>{{item.name}}</text>
			</view>
		</view>
		<view style="padding-bottom: 200rpx;">
			<u-sticky>
				<u-tabs active-color="#20cbd4" :list="tabsList" :is-scroll="false"></u-tabs>
			</u-sticky>
			<view><u-parse :html="htmlNode"></u-parse></view>
		</view>
		<view class="navigation">
			<!-- <view class="left">
				<view class="item" @click="iconClick(0)">
					<image style="width: 40rpx;height: 40rpx;" src="/static/tabbar/tab_home_sel.png"></image>
					<view class="text u-line-1">首页</view>
				</view>
				<view class="item" @click="iconClick(1)">
					<image style="width: 40rpx;height: 40rpx;" src="https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/share.png"></image>
					<view class="text u-line-1">分享</view>
				</view>
			</view> -->
			
			<view class="right">
				<view class="seckill btn u-line-1" @click="showGoodsPopup()">立即秒杀</view>
			</view>
		</view>
		<u-popup class="goodsPopup" mode="bottom" :border-radius="30" v-model="showPopup">
			<scroll-view scroll-y="true" style="max-height: 600rpx;"> 
				<view class="goodsInfoPop">
					<image :src="goodsInfo.image[0].file_url"></image>
					<view class="infoRight">
						<view class="goods_tit u-line-2">{{seckillInfo.title}}</view>
						<view class="pricebox_pop">
							<view class="pricePop">¥{{seckillInfo.price}}</view>
							<view v-if="goodsInfo.show_stock == 1">库存{{seckillInfo.bstock}}件</view>
							<view v-else>
								<block v-if="seckillInfo.bstock>0">库存充足</block>
								<block v-else>库存不足</block>
							</view>
						</view>
					</view>
				</view>
				<view v-if="goodsInfo.spec_type == 2" class="norm_item" v-for="(item, index) in skuList" :key="index">
					<view class="goods_tit">{{item.group_name}}</view>
					<u-radio-group v-model="item.title" shape="square" active-color="#20cbd4">
						<u-radio 
							v-for="(item1, index1) in item.spec_items" :key="index1" :name="item1.spec_value" @change="normChange(index,index1,item1.spec_value)">
							{{item1.spec_value}}
						</u-radio>
					</u-radio-group>
				</view>
			</scroll-view>
			
			<view class="pop_num">
				<view class="goods_tit">购买数量</view>
				<view><u-number-box :disabled-input="true" color="#20cbd4" :step="1" :min="1" :max="1" v-model="popNumber"></u-number-box></view>
			</view>
			<view class="confrim-btn"> 
				<u-button @click="confrimClick" :custom-style="confrimStyle" hover-class="none" shape="circle" plain>确定</u-button>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
		<u-popup v-model="showModel" mode="center" width="80%" height="70%" :border-radius="20">
			<view class="myextension">
				<block class="mycanvas">
					<image class="imgs" style="width:280px;height:400px" :src="imgUrl" mode=""></image>
				</block>
				<!-- #ifndef H5 -->
				<view class="saveImg" @tap="saveImg" style="background:#20cbd4">保存海报</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<p class="tips">长按图片进行保存</p>
				<!-- #endif -->
			</view>
		</u-popup>
		<login-model ref="loginModel"></login-model>
		<hoverMenu></hoverMenu>
	</view>
</template>

<script>
	import hoverMenu from "@/components/public/sa-hover-menu.vue";
	import {seckillDetail,seckillBuy,isLogin,goodsBanner} from "@/common/api.js";
	import loginModel from "@/components/public/loginModel.vue";
	import empty from "@/components/public/empty.vue";
	export default {
		components: {
			empty,
			loginModel,
			hoverMenu
		},
		data() {
			return { 
				goodsInfo:{},
				seckillInfo:{},
				file_url:"",//规格中图片
				htmlNode:"",//商品详情
				tabsList: [{
					name: '商品详情'
				}],
				services:[
					{name:"极速退款",icon:"https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/serviceshandiantuikuan.png"},
					{name:"正品保障",icon:"https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/zhengpinbaozhangxian.png"}
				],
				customStyle:{
					color:"#20cbd4",
					border:"5rpx #20cbd4",
					marginBottom:"10rpx"
				},
				confrimStyle:{
					color:"#f5fdfe",
					border:"5rpx #20cbd4",
					background:"#20cbd4"
				},
				having_time:0,
				down_status:0,
				status:0,
				showPopup:false,
				popNumber:1,
				goods_id:0,
				showModel:false,
				imgUrl:"", //分享图片
				buy_status:0,
				code:0,
				active_id:0,
				goods_sku_id:0,
				skuList:[],
				ids:'',
				swiperHeight:600
			}
		},
		onLoad(option) {
			//设置轮播图高度
			this.setSwiperHeight();
			if(option.scene){
				let scene = decodeURIComponent(option.scene)
				if(scene.indexOf('&')>0){
					let qs = scene.split('&')
					let query = []
					qs.forEach((value)=>{
						console.log(value)
						let kv = value.split('=')
						query[kv[0]] = kv[1]
					})
					if(query['active_id']){
						option.active_id = query['active_id']
					}
					if(query['spread_code']){
						option.spread_code = query['spread_code']
					}
				}
			}
			this.active_id=option.active_id;
			console.log(option.id);
			this.selectGoodsInfo(option.active_id);
			this.down_status = this.seckillInfo.down_status;
			this.having_time = this.seckillInfo.having_time;
			this.goods_id = this.seckillInfo.goods_id;
			
			if(option.spread_code){
				uni.setStorageSync('spread_code', option.spread_code);
			}
			if(option.custom_params){
				var custom_params=decodeURIComponent(option.custom_params);
				var costom_data=JSON.parse(custom_params);
				if(costom_data.roomid){
					uni.setStorageSync('roomid', costom_data.roomid);
					uni.setStorageSync('roomtime', Date.now());
				}
				if(costom_data.spread_code){
					uni.setStorageSync('spread_code', costom_data.spread_code);
				}
				console.log(costom_data,custom_params,'custom_params');
			}
		},
		methods: {
			floatTouchClick(index){
				this.$uniApi.floatTouch(index);
			},
			selectGoodsInfo(id){
				seckillDetail(this,{id:id});
			},
			setFrom(html) {
				//处理富文本 让图片居中适应
				let newContent = html.replace(/\<img/gi, '<img class="rich-img" ');
				this.htmlNode = newContent
			},
			setSwiperHeight(){
				let _this = this;
				_this.swiperHeight = uni.getSystemInfoSync().screenWidth*2;
			},
			clickImg(index){
				let that=this;
				var img = [];
				for(var i in that.goodsInfo.image){
					img.push(that.goodsInfo.image[i].file_url)
				}
				// 预览图片
				uni.previewImage({
					urls: img,
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {
						    that.saveImg(img[data.index],that)
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			saveImg(url,that){
				uni.downloadFile({
					url:url,
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function () {
								uni.showToast({
									title: '保存成功',
									icon: 'success', 
									icon: true
								});
							}
						});
					}
				});
			},
			iconClick(index){
				if(index==0){
					uni.switchTab({
						url:"/pages/tabBar/home"
					})
				}else if(index==1){
					//分享
					isLogin(this,{type:3});
					goodsBanner(this,{goods_id:this.goods_id,type:1})
				}
			},
			showGoodsPopup(){
				// #ifdef H5
					let ua = window.navigator.userAgent.toLowerCase()
					if (ua.match(/MicroMessenger/i) == 'micromessenger') {
						if(uni.getStorageSync("openidGzh")==null||uni.getStorageSync("openidGzh")==""){
							uni.navigateTo({
								url:"/pages/views/authorization?state="+this.goods_id,
								success() {
									this.$u.toast("未授权微信公众号支付，请点击授权")
								}
							})
						}
					}
				// #endif
				// if(this.down_status==1 && this.having_time!=0){
				// 	this.$refs.uToast.show({title: '还未开始'});
				// 	return;
				// }
				isLogin(this,{type:2});
				if(this.goodsInfo.spec_type == 1){
					this.ids = this.goodsInfo.goods_sku.spec_sku_id;
				}
			},
			normChange(groupIdx,redioIdx,redioName){
				this.skuList[groupIdx].title=redioName;
				this.skuList[groupIdx].spec_items[redioIdx].is_check=true;
				for(var i=0;i<this.skuList[groupIdx].spec_items.length;i++){
					if(this.skuList[groupIdx].title!=this.skuList[groupIdx].spec_items[i].spec_value){
						this.skuList[groupIdx].spec_items[i].is_check=false;
					}
				}
				this.changePrice();
			},
			//处理价格
			changePrice(){
				var that = this;
				var flag = true;
				//如果存在规格未选中的值，直接返回
				for (var i in that.skuList) {
					if (that.skuList[i].title == '') {
						flag = false;
						return; //如果数组里有为空的值，那直接返回true
					}
				}
				if(flag){
					//把选中的id放在数组中
					var ids = [];
					var goodsNorms = [];
					for (var i in that.skuList) {
						for (var j in that.skuList[i].spec_items) {
							if(that.skuList[i].spec_items[j].is_check == true){
								ids.push(that.skuList[i].spec_items[j].item_id)
								goodsNorms.push(that.skuList[i].spec_items[j].spec_value)
							}
						}
					}
					
					that.goodsNorms = goodsNorms;
					//把逗号变为下划线
					var id = ids.toString().replace(",","_");
					that.ids = id;
					
				}
			},
			confrimClick(){
				
				// if(this.down_status==1 && this.having_time!=0){
				// 	this.$refs.uToast.show({title: '还未开始'});
				// 	return;
				// }
				if(this.goodsInfo.spec_type == 2){
					for(var i=0;i<this.skuList.length;i++){
						if(this.skuList[i].title==''){
							this.$refs.uToast.show({title: '请选择'+this.skuList[i].group_name+'规格'});
							return;
						}
					}
				}
				this.showPopup=false;
				this.buy(this.active_id);
				
				
			},
			goToOrder(){
				//立即购买
				uni.navigateTo({
				  url: '/seckill_new/confrimOrder?active_id='+this.active_id+'&goods_id='+this.goods_id+'&goods_sku_id='+this.ids+'&num='+this.popNumber
				});
			},
			buy(id){
				seckillBuy(this,{id:id});
			},
			onChange(e){
				// this.having_time = e;
				//console.log(this.having_time);
			}
		}
	}
</script>

<style>
	page{
		font-family: PingFang SC;
		background: #f6f6f6;
	}
	.detailImg{
		/* height: 600rpx; */
	}
	.price_box{
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
		font-size: 30rpx;
	}
	.price_txt{
		display: flex;
	}
	.price_txt view{
		font-size: 25rpx;
		margin-right: 20rpx;
	}
	.price_txt text{
		margin: 0 10rpx;
		font-size: 40rpx;
		font-size: 600;
	}
	.u_price{
		text-decoration: line-through;
		line-height: 70rpx;
	}
	.goods_info{
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 10rpx;
	}
	.goods_tit{
		font-size: 30rpx;
		margin-bottom: 15rpx;
	}
	.goods_remark{
		color: #0e595d;
	}
	.norms{
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 10rpx;
		display: flex;
		align-items: center;
	}
	.norms view{
		display: flex;
		align-items: center;
	}
	.norms view image{
		width: 40rpx;
		height: 40rpx; 
		margin-right: 5rpx;
		margin-left: 10rpx; 
	}
	.commentItem{
		margin: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}
	.userInfo{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.userInfo text{
		margin-left: 20rpx;
		color: #909399;
	}
	.reply{
		background-color: #f6f6f6;
		padding: 10rpx;
		border-radius: 10rpx;
	}
	.allBtn{
		text-align: center;
	}
	.goodsInfoPop{
		display: flex;
		padding: 20rpx 30rpx;
	}
	.goodsInfoPop image{
		width: 150rpx;
		height: 150rpx;
	}
	.infoRight{
		margin-left: 10rpx;
		width: 530rpx;
	}
	.pricebox_pop{
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #909399;
	}
	.pricePop{
		font-size: 40rpx;
		color: #FA3534;
	}
	.norm_item{
		padding: 20rpx 30rpx;
	}
	.confrim-btn{
		padding: 0 50rpx;
	} 
	.pop_num{
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.pintuanBtn{
		line-height: 36rpx;
		padding: 0 30rpx;
		border-radius: 36rpx;
		color: #ffffff;
		text-align: center;
	}
	.commentImg{
		display: flex;
		align-items: center;
		margin: 20rpx 0;
	}
	.commentImg image{
		width: 150rpx;
		height: 150rpx;
		margin-right: 10rpx;
	}
	.model_box{
		padding: 20rpx;
	}
	.model_title{
		font-size: 30rpx;
		font-weight: 700;
		padding: 0 0 10rpx;
	}
	.model_item{
		padding: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		border-bottom:1rpx solid #e4e7ed;
	}
	.model_remark{
		font-size: 22rpx;
		margin-top: 10rpx;
		color: #909399;
	}
</style>
<style lang="scss" scoped>
.navigation {
	display: flex;
	margin-top: 100rpx;
	background-color: #ffffff;
	padding: 16rpx 16rpx;
	width: 750rpx;
	position: fixed;
	bottom: 0;
	z-index: 10;
	justify-content: center;
	align-items: center;
	.left {
		display: flex;
		font-size: 20rpx;
		.item {
			margin: 0 30rpx;
		}
	}
	.right {
		display: flex;
		font-size: 28rpx;
		align-items: center;
		.btn {
			line-height: 66rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			color: #ffffff;
			text-align: center;
		}
		.cart {
			background: linear-gradient(90deg,#676869,#525252);
			margin-right: 30rpx;
		}
		.buy {
			background: linear-gradient(90deg,#13797f,#20cbd4);
		}
		.seckill {
			background: linear-gradient(93deg,#d01325,#ed3c30);
			width: 600rpx;
		}
	}
}
.myextension {
		background-color: #FFFFFF;
		overflow: hidden;
	}

	.myextension image {
		display: block;
	}

	.saveImg {
		width: 300upx;
		height: 80upx;
		border-radius: 40upx;
		box-shadow: 0 10upx 10upx #ddd;
		background-color: pink;
		line-height: 80upx;
		text-align: center;
		color: #fff;
		margin: 0 auto;
		margin-top: 940upx;
	}

	.mycanvas {
		margin: 0 auto;
		transform: translateY(30upx);
		border-radius: 10upx;
		overflow: hidden;
	}

	.imgs {
		position: absolute;
		top: 70upx;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 10upx;
		overflow: hidden;
	}
	.tips{
		text-align: center;
		color: #999;
		font-size: 24upx;
		margin-top: 1100upx;
	}
</style>
